//初始化渲染页
Vue.component("render", {
  template: `<div :style="style">
    <component v-for="(item,id) in data" :key="id" :data="item.data" :layer="item.layer" :id="item.id" :is="item.title">
        <template v-if="item.slot" v-slot:default>
            <render :data="item.slot" :style="item.style"></render>
        </template>
    </component></div>`,
  props: ["data", "style"],
});
//初始化渲染页
Vue.component("renderConfig", {
  template: `<div>
    <component v-for="(item,id) in data" :key="id" :data="item.data" :slot="item.slot" :styleData="item.style" :id="item.id" :is="item.config">
        <template v-if="item.slot" v-slot:default>
            <render-config :data="item.slot"></render-config>
        </template>
    </component></div>`,
  props: ["data"],
});
//盒子
Vue.component("Box", {
  template: `<div :id="id" :class="[layer?'layer':'']" :style="{'border':layerBorder,...data}">
    <slot></slot>
    <i v-show="layer&&SortableSwitch" style="position: absolute;top: 0;left: 0; z-index:999; color:#67C23A;" class="el-icon-rank"></i></div>`,
  mixins: [global],
});
Vue.component("BoxConfig", {
  template: `<el-card style="background-color: white;">
    <div class="table_titel">
        <div class="titel">盒子元素</div>
        <div class="operation">
            <el-button type="primary" size="small" @click="insert">插入组件</el-button>
        </div>
    </div>
    <div class="table_titel">
        <div class="titel">属性配置</div>
    </div>
    <el-descriptions :column="2" border size="small">
        <el-descriptions-item label="自定义属性">
            <el-input type="textarea" :autosize="{ minRows: 2}" placeholder="请输入自定义属性" v-model="style"></el-input>
        </el-descriptions-item>
    </el-descriptions>
    <div><slot></slot></div>
</el-card>`,
  mixins: [globalConfig],
  props: ["styleData"],
  data() {
    return {
      style: "",
      isbackgroundColor: true,
    };
  },
  methods: {
    insert() {
      console.log(this);
    },
    handleChange(is, value) {
      if (!is) {
        this.styleData[value] = "";
      }
      console.log(is, value);
      console.log(this.styleData);
    },
    handleInput(e) {
      try {
        this.styleData = JSON.parse(e);
        console.log(this.styleData);
      } catch (error) {}
    },
  },
  mounted() {
    this.style = JSON.stringify(this.styleData);
  },
});
//登录板块
Vue.component("Login", {
  template: `<div style="background-color: rgb(255, 255, 255); width: 100%; height: 475px;"> 
        <div style="display: flex;flex-direction: column; height: 35%;">
            <!-- 未登录 -->
            <div v-if="true" style="margin: 20px; height: 100%;">
                <div style="display: flex; justify-content: center; align-items: center; height: 55%;">
                    <span style="font-size: 16px;">欢迎来到合美供销云平台！</span>
                </div>
                <div style="display: flex; align-items: end; justify-content: space-around;height: 45%;">
                    <div style="display: flex; justify-content: center; align-items: center; border: 2.5px solid #28A745; 
                        box-sizing: border-box; cursor: pointer; width: 100px; height: 90%;background-color: #28A745;">
                        <span style="font-size: 16px; color: #ffffff;">请登录</span>
                    </div>
                    <div style="display: flex; justify-content: center; align-items: center; border: 2.5px solid #28A745;
                        box-sizing: border-box; cursor: pointer; width: 100px; height: 90%">
                        <span style="font-size: 16px; color: #28A745;">免费注册</span>
                    </div>
                </div>
            </div>
            <!-- 已登录 -->
            <div v-else style="margin: 20px; display: flex; align-items: center; height: 100%;">
                <div style="flex-shrink: 1;justify-content: center; align-content: center; width: 60px; height: 60px;">
                    <el-image src="./img/NoLogo.png" fit="cover" style="border-radius: 50%;  width: 60px;height: 60px; border:2.5px solid #28A745;" ></el-image>
                </div>
                <div style="width: 100%;height: 100%;display: flex; padding-left: 10px; padding-right: 10px; flex-direction: column; justify-content: center; position: relative;">
                    <div style="display: flex; align-items: center; width: 195px;height: 50%;">
                        <span style="font-size: 16px; overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">Hi，袁丙超(黑龙江小康龙江集团)</span>
                    </div>
                </div>
            </div>
        </div>
        <div style="padding-left: 45px;padding-right: 45px;padding-top: 20px; border-top: 1px solid #eaeaea;">
            <div style="display: flex; justify-content: center; width: 100%; height: 25%;">
                <div style="display: flex; justify-content: center; align-items: center; box-sizing: border-box;
                    border-bottom: 2.5px solid #28A745; width: 40%;">
                    <span style="font-size: 16px; font-weight: 700; color:#28A745;">服务热线</span>
                </div>
            </div>
            <div style="padding-top: 20px;padding-bottom: 20px;display: flex;justify-content: center;">
                <div style="font-size: 20px; color: #28A745; font-weight: 700;">
                    <i class="el-icon-phone"></i>400-9667-365
                </div>
            </div>
        </div>
        <div style="display: flex; justify-content: center; width: 100%; height: 25%;">
            <div style="display: flex; justify-content: center; width: 100%; height: 25%;">
                <div style="display: flex; justify-content: center; align-items: center; box-sizing: border-box;
                    border-bottom: 2.5px solid #28A745; width: 40%;">
                    <span style="font-size: 16px; font-weight: 700; color:#28A745;">服务热线</span>
                </div>
                <div>
                    <div></div>
                </div>
            </div>
        </div>
    </div>`,
});
//销售板块
Vue.component("TablePlate", {
  template: `<div style="background-color: white; display: flex; flex-direction: column; width: 100%; height: 450px; ">
    <div style="position: relative; margin: 20px;display: flex;align-items: center;">
        <span
            style="margin-right: 25px; font-size: 20px; font-weight: 700; white-space: nowrap;">今日采购</span>
        <span
            style="font-size: 14px; color:#343a40;cursor: pointer; position: absolute; right: 0">更改&gt;</span>
    </div>
    <div
        style="display: flex; margin-left: 20px; margin-right: 20px; margin-bottom: 20px; height: 100%;">
        <div style="width: 10%; height: 100%; position: relative">
            <el-image src="./img/mi.png"
                style="position: absolute; width: 100%;height: 100px;bottom: 0;"></el-image>
            <div class="pl-4"
                style="border-left: 5px solid #34ae49;position: absolute;top: 50px;">
                <span style="font-size: 20px; color: #34ae49;">五谷类</span>
            </div>
        </div>
        <el-table :data="data" style="width: 90%; margin-left: 10px;" height="364px">
            <el-table-column show-overflow-tooltip prop="date" label="销售品种"></el-table-column>
            <el-table-column show-overflow-tooltip prop="name" label="剩余"></el-table-column>
            <el-table-column show-overflow-tooltip prop="address" label="包装"></el-table-column>
            <el-table-column show-overflow-tooltip prop="address" label="发货地"></el-table-column>
            <el-table-column show-overflow-tooltip prop="address" label="销售方"></el-table-column>
            <el-table-column show-overflow-tooltip prop="address" label="出售情况"></el-table-column>
            <el-table-column show-overflow-tooltip prop="address" label="操作"></el-table-column>
        </el-table>
    </div>
</div>`,
  data() {
    return {
      data: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ],
    };
  },
});
//新闻板块
Vue.component("NewsPlate", {
  template: `
    <div style="padding-left: 20px;padding-right: 20px;padding-top: 20px;padding-bottom: 20px; background-color: #fff;">
    <div style="padding-bottom: 20px;">
    <span style="font-size: 20px; font-weight: 700;">最新资讯</span>
</div>
<div style="width: 100%;">
    <el-row :gutter="15">
        <el-col :span="12" v-for="i in 2" :key="i">
            <div style="border: 1px solid #eaeaea; width: 100%; box-sizing: border-box;">
                <div style="width: 100%; height: 100%;">
                    <div style="background-color: #f5f5f5; height: 45px; position: relative;">
                        <div style="background-color: #fff; display: flex; align-items: center; justify-content: center; 
                            border-top: 1px solid #34ae49; box-sizing: border-box; height: 100%; width: 20%;">
                            <span style="font-size: 20px;">新闻资讯</span>
                        </div>
                        <span style="display: flex; align-items: center; font-size: 14px; color: #828d96; cursor: pointer; height: 100%;position: absolute;top: 0;  right: 10px;">
                            更多
                        </span>
                    </div>
                    <div style="height: 100%; display: flex; width: 100%;">
                        <div style="margin-left: 10px; margin-right: 10px; width: 100%; height: 250px;">
                            <div v-for="i in 5" :key="i" style="cursor: pointer; display: flex; align-items: center; width: 100%; border-bottom: 1px dashed #eaeaea;
                                position: relative; box-sizing: border-box; height: 50px;">
                                <div style="width: 16px; height: 16px; display: flex; align-items: center; justify-content: center;" :style="{ backgroundColor:'#34ae49' }">
                                    <span style="font-size: 16px; color: #fff;">{{i}}</span>
                                </div>
                                <span style="margin-left: 10px; margin-right: 10px;  font-size: 16px; overflow: hidden; text-overflow: ellipsis;white-space: nowrap;">
                                    测试新闻测试新闻测试新闻测试新闻测试新闻测试新闻测试新闻测试新闻测试新闻
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </el-col>
    </el-row>
</div>
</div>
    `,
});
//省份板块
Vue.component("ProvincePlate", {
  template: `
    <div style="background-color: #fff; padding: 15px;">
    <div style="border-left: 5px solid #28a745;">供销专区</div>
    <div style="display: flex;flex-wrap: wrap;background-size: auto;border-radius: 5px;">
        <div style="display: flex;flex-wrap: wrap;">
            <div v-for="i in 20" :key="i" style="margin: 10px;position: relative;">
                <div style="margin-left: 10px; margin-top: 10px; position: absolute; z-index: 11; border: 1px solid white; background-color: white;
                    border-radius: 5px 5px 5px 0; width: 80px; text-align: center; overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">
                    <span style="color: black;">黑龙江省</span>
                </div>
                <div style="position: absolute;z-index: 11;bottom: 0;color: #fff;padding: 10px;">点击进入</div>
                <div style="width: 174px; height: 192px;">
                    <el-image fil="fill" src="https://marketing.xiaokanglongjiang.com/dist/imgxklj/0fdfa46b20240413180323.png" 
                        style="width: 100%;height: 100%; display: flex;flex-wrap: wrap;background-size: auto;border-radius: 5px;"></el-image>
                </div>
            </div>
        </div>
    </div>
</div>
    `,
});
//两大板块
Vue.component("Plate", {
  template: `<div style="padding-top: 5px; padding-bottom: 5px;border-radius: 20rpx;margin-bottom: 20rpx;display: flex; flex-direction: column; width: 100%; flex-wrap: wrap;">
        <div style="display: flex; justify-content: space-between;">
            <div v-for="i in 2" :key="i" style="display: flex;justify-content: center;width: 597px;padding-bottom: 35px;background-color:#f1fff4;">
                <div style="margin-top: 25px; display: flex; flex-direction: column;align-items: center; width: 100%;">
                    <div style="font-size: 45rpx;display: flex;justify-content: center;align-items: center; color: green;">
                        <div style="font-size: 25px;font-weight: bold;color:#34ae49;">
                            测试
                        </div>
                        <div style="border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-left: 15px; 
                            width: 20px;height: 20px;background-color:#34ae49;box-sizing: border-box;padding-left: 2.5px;">
                            <i style="font-size: 18px; color: white;" class="el-icon-arrow-right"></i>
                        </div>
                    </div>
                    <div style="display: flex; width: 100%; justify-content: space-around; margin-top: 25px; flex-wrap: wrap;">
                        <div v-for="i in 4" :key="i" style="display: flex; flex-direction: column; align-items: flex-end; flex-shrink: 0;width:140px; border-radius: 10px;
                            background-image: url('./img/bgbjt.png');background-repeat: no-repeat;background-size: cover;">
                            <div style="box-sizing: border-box; font-size: 20px; color: black; font-weight: 700; color:#34ae49;
                                padding-left: 10px; padding-top: 10px; width: 100%; display: flex;">
                                测试
                            </div>
                            <div style="width: 55px; height: 55px;">
                                <el-image src="./img/cncpsg.png" fit="cover" style="width: 100%;height:100%;vertical-align: middle;"></el-image>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>`,
});
//日期组件
Vue.component("TextDate", {
  template: `<div :id="id" :class="[layer?'layer':'']" style="display: inline;" :style="{'border':layerBorder}">
    <span :style="{marginLeft:Left,fontSize,fontWeight, color}">{{time}}</span>
    <i v-show="layer&&SortableSwitch" style="position: absolute;top: 0;left: 0; z-index:999; color:#67C23A;" class="el-icon-rank"></i></div>`,
  mixins: [global],
  data() {
    return {
      time: "2024-06-18 10:03:00 星期二",
    };
  },
  mounted() {},
});
//导航栏菜单
Vue.component("NavMenu", {
  template: `<div :id="id" :class="[layer?'layer':'']" style="display: inline;" :style="{'border':layerBorder}">
    <el-menu class="el-menu-demo" :mode="data.mode" :active-text-color="data.hoverTextColor" :text-color="data.TextColor" :background-color="backgroundColor">
        <el-menu-item :index="index" v-for="(item,index) in data.Children.navName" :key="index">
            <span @click="handle(item)" :style="{fontSize,fontWeight,paddingTop:Top,paddingBottom:Bottom,paddingLeft:Left,paddingRigth:Right}">{{item.name}}</span>
        </el-menu-item>
    <i v-show="layer&&SortableSwitch" style="position: absolute;top: 0;left: 0; z-index:999; color:#67C23A;" class="el-icon-rank"></i></div>`,
  mixins: [global],
  methods: {
    handle(item) {
      console.log(item);
      if (item.name == "首页") {
        window.location.href =
          "http://localhost:8081/dist/h5XKLJ/#/pages/index/index";
      } else if (item.name == "供应大厅") {
        window.location.href =
          "http://localhost:8081/dist/h5XKLJ/#/pages/index/supply";
      } else if (item.name == "采购大厅") {
        window.location.href =
          "http://localhost:8081/dist/h5XKLJ/#/pages/index/purchase";
      } else if (item.name == "用户专区") {
        window.location.href =
          "http://localhost:8081/dist/h5XKLJ/#/pages/index/enterprise";
      } else if (item.name == "资讯中心") {
        window.location.href =
          "http://localhost:8081/dist/h5XKLJ/#/pages/index/consult";
      } else if (item.name == "金融服务") {
        window.location.href =
          "http://localhost:8081/dist/h5XKLJ/#/pages/index/EnterpriseServices";
      } else if (item.name == "产品商城") {
        window.location.href =
          "https://marketing.xiaokanglongjiang.com/dist/h5XKLJShop/index.html#/";
      } else if (item.name == "关于我们") {
        window.location.href =
          "http://localhost:8081/dist/h5XKLJ/#/pages/index/Aboutus";
      }
      // window.location.href = item.url
    },
  },
});
Vue.component("NavMenuConfig", {
  template: `<el-card style="background-color: white;">
    <div class="table_titel">
        <div class="titel">导航栏属性</div>
        <div class="operation">
            <el-button :type="isSwitch?'danger':'success'" size="small" @click="()=>{this.isSwitch = !this.isSwitch}">{{isSwitch?'取消':'拖拽'}}</el-button>
        </div>
    </div>
    <el-descriptions :column="2" border size="small">
        <el-descriptions-item label="文本内容">
            <el-input v-model="data.text" placeholder="请输入文本内容"></el-input-number>
        </el-descriptions-item>
        <el-descriptions-item label="文本粗细">
            <el-input-number v-model="data.fontWeight" :min="0" :max="900" :step="100" step-strictly placeholder="请输入文本粗细"></el-input-number>
        </el-descriptions-item>
        <el-descriptions-item label="字体大小">
            <el-input-number v-model="data.fontSize" :min="1" placeholder="请输入字体大小"></el-input-number>
        </el-descriptions-item>
        <el-descriptions-item label="字体单位">
            <el-select filterable v-model="data.fontSizeUnit" placeholder="请选择字体单位">
                <el-option v-for="(item,index) in unit" :key="item.value" :label="item.label":value="item.value"></el-option>
            </el-select>
        </el-descriptions-item>
        <el-descriptions-item label="左边距">
            <el-input-number v-model="data.left" :min="0" placeholder="请输入左边距"></el-input-number>
        </el-descriptions-item>
        <el-descriptions-item label="左边距单位">
            <el-select filterable v-model="data.leftUnit" placeholder="请选择左边距单位">
                <el-option v-for="(item,index) in unit" :key="item.value" :label="item.label":value="item.value"></el-option>
            </el-select>
        </el-descriptions-item>
        <el-descriptions-item label="右边距">
            <el-input-number v-model="data.right" :min="0" placeholder="请输入右边距"></el-input-number>
        </el-descriptions-item>
        <el-descriptions-item label="右边距单位">
            <el-select filterable v-model="data.rightUnit" placeholder="请选择右边距单位">
                <el-option v-for="(item,index) in unit" :key="item.value" :label="item.label":value="item.value"></el-option>
            </el-select>
        </el-descriptions-item>
        <el-descriptions-item label="上边距">
            <el-input-number v-model="data.top" :min="0" placeholder="请输入上边距"></el-input-number>
        </el-descriptions-item>
        <el-descriptions-item label="上边距单位">
            <el-select filterable v-model="data.topUnit" placeholder="请选择上边距单位">
                <el-option v-for="(item,index) in unit" :key="item.value" :label="item.label":value="item.value"></el-option>
            </el-select>
        </el-descriptions-item>
        <el-descriptions-item label="下边距">
            <el-input-number v-model="data.bottom" :min="0" placeholder="请输入下边距"></el-input-number>
        </el-descriptions-item>
        <el-descriptions-item label="下边距单位">
            <el-select filterable v-model="data.bottomUnit" placeholder="请选择下边距单位">
                <el-option v-for="(item,index) in unit" :key="item.value" :label="item.label":value="item.value"></el-option>
            </el-select>
        </el-descriptions-item>
        <el-descriptions-item label="字体颜色">
            <el-color-picker @change="(e)=>{if(e==null)this.data.color=''}" 
                v-model="data.color" show-alphas :predefine="predefineColors"></el-color-picker>
        </el-descriptions-item>
        <el-descriptions-item label="背景颜色">
            <el-color-picker @change="(e)=>{if(e==null)this.data.backgroundColor=''}" 
                v-model="data.backgroundColor" show-alphas :predefine="predefineColors"></el-color-picker>
        </el-descriptions-item>
    </el-descriptions>
    <div class="table_titel">
        <div class="titel">导航栏菜单</div>
    </div>
</el-card>`,
  mixins: [globalConfig, drag],
  methods: {
    add() {},
  },
});
//内嵌外部资源
Vue.component("Object", {
  template: `<div :id="id" :class="[layer?'layer':'']" style="display: inline;" :style="{'border':layerBorder}">
    <object :width="width" :height= "height" :style="{marginLeft:Left,marginRight:Right,marginTop:Top,marginBottom:Bottom}" 
        :data="data.url" :type="data.type"></object>
    <i v-show="layer&&SortableSwitch" style="position: absolute;top: 0;left: 0; z-index:999; color:#67C23A;" class="el-icon-rank"></i></div>`,
  mixins: [global],
});
Vue.component("ObjectConfig", {
  template: `<el-card style="background-color: white;">
    <div class="table_titel">
        <div class="titel">内嵌外部资源</div>
        <div class="operation">
            <el-button type="primary" size="small" @click="add">插入组件</el-button>
        </div>
    </div>
</el-card>`,
  mixins: [globalConfig],
  methods: {
    add() {},
  },
});
Vue.component("texta", {
  template: `<div style="background-color: #f5f5f5; width: 100%; height: 25px;">
    <div style="display: flex;justify-content: space-between; height: 100%;">
        <!-- 登录 -->
        <div style="display: flex; align-items: center; justify-content: space-between; width: 120px;">
            <div style="display: flex;align-items: center; justify-content: space-between; width: 120px; height: 100%;">
                <span style="margin-left: 5px; font-size: 12px;color: #28a745; cursor:pointer">请登录</span>
                <span style="font-size: 12px;color: #828d96; cursor: pointer;">免费注册</span>
            </div>
        </div>
        <!-- 地址 -->
        <div style="display: flex;align-items: center;justify-content: space-between;width: 190px;">
            <div style="display: flex; justify-content: center; align-items: center; font-size: 12px;">
                <i class="el-icon-location-outline"></i>
                黑龙江省哈尔滨市香坊区
            </div>
        </div>
    </div>
</div>`,
});
Vue.component("textb", {
  template: `<div style="width: 100%; height: 50px; background-color: #28a745;">
    <div style="display: flex;align-items: center; position: relative; height: 100%;margin: 0 30rpx;">
        <div style="display: flex;align-items: center;cursor: pointer;">
            <el-image src="./img/t1.png" style="width: 50px; height: 50px;" fit="cover"></el-image>
            <el-image src="./img/t1.png" style="width: 50px; height: 50px; margin-left: 5px;" fit="cover"></el-image>
            <div style="margin-left: 25px; color: white; font-size: 1.5rem;">多点惠农产业链交易平台</div>
        </div>
    </div>
</div>`,
});
Vue.component("textc", {
  template: `<div style="display: flex;background-color: white;border-top:0.5px solid #dee2e6;
    border-bottom:0.5px solid #dee2e6; width: 100%; height: 50px; justify-content: space-between; align-items: center;">
    <!-- 搜索框 -->
    <div style="display: flex; justify-content: center; align-items: center; width: 70%;">
        <div style="display: flex;">
            <div style="width: 75%; padding-left: 10px; display: flex; align-items: center; 
                border:2.5px solid #28a745; box-sizing: border-box;">
                <input type="text" placeholder="请输入内容"
                    style="border: none; width: 100%;height: 80%;" v-model="input2">
            </div>
            <div style="display: flex;justify-content: center;align-items: center;border:2.5px solid #28a745 ;
                box-sizing: border-box; width: 25%; background-color: #28a745;">
                <span style="cursor: pointer;font-size: 12px; color: white;">搜索</span>
            </div>
        </div>
    </div>
    <!-- 折叠图标 -->
    <div style="margin: 0 5px;width: 30px;height: 30px;border: 1px solid aliceblue; 
        border-radius: 5px;background-color: aliceblue;line-height: 30px;position: relative;">
        <i style="font-size: 30px;" class="el-icon-s-operation"></i>
    </div>
</div>`,
  data() {
    return {
      input2: "",
    };
  },
});
Vue.component("textd", {
  template: `<div style="background-color: #eaeaea; padding: 10px 0;">
    <div style="height: 190px;">
        <Swiper :data="text"></Swiper>
    </div>
</div>`,
  data() {
    return {
      text: {
        arrow: "never", //切换箭头展示
        times: 2, //轮播时长 单位:s
        type: "", //类型 空:默认  card:卡片化
        trigger: "click", //指示器触发条件
        radius: 0, //圆角弧度
        left: 0, //左边距
        leftUnit: "px", //左边距单位
        right: 0, //右边距
        rightUnit: "px", //右边距单位
        top: 0, //上边距
        topUnit: "px", //上边距单位
        bottom: 0, //下边距
        bottomUnit: "px", //下边距单位
        direction: "horizontal", //滚动方向 水平:horizontal 垂直:vertical
        height: "190", //高度
        heightUnit: "px", //高度单位
        Children: {
          image: [
            {
              id: 1,
              src: "./img/t1.png",
              fit: "fill",
            },
            {
              id: 2,
              src: "./img/t2.png",
              fit: "fill",
            },
            {
              id: 3,
              src: "./img/t3.png",
              fit: "fill",
            },
          ],
        },
      },
    };
  },
});
Vue.component("texte", {
  template: `<div style="margin:5px 0;padding: 0 10px;">
    <div style="border-radius: 10px;margin-bottom: 10px; padding: 5px 0; display: flex; overflow: hidden;justify-content: space-around;
        flex-wrap: wrap; flex-direction: column; width: 100%; background-image: url('./img/bkbjt.png');background-size: cover;">
        <div style="display: flex; justify-content: space-around;align-items: center;padding-top: 22px;
            width: 90%;margin: 0 auto;color: white;">
            <div style="padding: 5px 20px;cursor: pointer; color: green;background-color: white; font-weight: bold; font-size: 20px; border-radius: 5px;">
                营销中心
            </div>
            <div style="padding: 5px 20px;cursor: pointer; font-weight: bold; font-size: 20px; border-radius: 5px;">
                服务中心
            </div>
        </div>
        <div style="padding: 25px 0 15px 0;">
            <div v-if="true">
                <div style="display: flex; width: 100%;justify-content: space-around;flex-wrap: wrap;">
                    <div style="display: flex; flex-direction: column; align-items: center;flex-shrink: 0;" v-for="i in 4" :key="i">
                        <div style="width: 30px;height:30px;">
                            <el-image style="width: 100%;height: 100%; vertical-align: middle" src="./img/gximg1.jpg" fil="cover" class="img"></el-image>
                        </div>
                        <div style="font-size: 14px; color:white;font-weight: bold;"> 产品商城 </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>`,
});
Vue.component("textf", {
  template: `<div style="border-radius: 7px;background-color: white; margin: 10px 10px 0 10px;padding: 10px;">
    <div style="display: flex; font-size: 18px; align-items: center; color: green;font-weight: bold;">
        <div style="margin-right: 50px;">服务热线</div>
        <i class="el-icon-phone"></i>400-9667-365
    </div>
</div>`,
});
Vue.component("textg", {
  template: `<div style="padding: 0 10px;">
    <div style="display: flex; margin: 15px 0;justify-content: center; width: 100%;">
        <div style="display: flex; align-items: center; background-color: white;border-radius: 10px;width: 100%;height: 75px;">
            <div style="background-color: #28a745;border-radius:10px 0 0 10px;font-weight: bold;
                padding: 11px 0; width: 90px; box-sizing: border-box; height: 100%;display: flex;flex-direction: column;justify-content: space-evenly;">
                <div style="text-align: center;color: white;">咨询</div>
                <div style="text-align: center;color: white;">中心</div>
            </div>
        </div>
    </div>
</div>`,
});
Vue.component("texth", {
  template: `<div style="padding: 0 10px; display: flex; flex-direction: column;">
    <div style="display: flex; margin: 10px 0; justify-content: space-between;">
        <div style="display: flex; align-items: center; justify-content: center; background-color: white;
            border-radius: 5px; width: 24%; padding: 10px; border-bottom: 4px solid #AFDEAF;">
                <span>热门供应</span>
        </div>
        <div style="display: flex; align-items: center; justify-content: center; background-color: white;
            border-radius: 5px; width: 24%; padding: 10px;">
                <span>今日采购</span>
        </div>
        <div style="display: flex; align-items: center; justify-content: center; background-color: white;
            border-radius: 5px; width: 24%; padding: 10px;">
                <span>好货推荐</span>
        </div>
    </div>
    <div>
        <div style="margin-bottom: 10px;">
            <div style="width: 100%;border-radius: 10px;position: relative; background-color: #f5f5f5; display: flex; flex-direction: column;">
                <div style="margin: 10px; position: relative;">
                    <span style="font-size: 18px; font-weight: bold;">热门供应</span>
                    <span style="font-size: 10px; color: #343a40;cursor: pointer;position: absolute;right: 0;">
                        更多<i class="el-icon-arrow-right"></i>
                    </span>
                </div>
                <div style="display: flex; margin: 0 10px 20px 10px; height: 100%;">
                    <div style="margin-top: 10px; width: 100%;">
                        <el-carousel indicator-position="none" arrow="always" height="150px">
                            <el-carousel-item v-for="item in 4" :key="item">
                      
                                <div style="display: flex; flex-direction: column; margin-right: 10px; border-radius: 10px; background-color: white; padding: 10px 0; 
                                    width: 100%; position: relative; flex-shrink: 0; height: 100%;">
                                    <div style="border-radius: 5px; padding: 5px; display: flex; align-items: center; justify-content: center; background-color: #28a745;
                                        position: absolute; top: 0; left: 0;">
                                            <span style="font-size: 8px; color: white;">预包装</span> 
                                    </div>
                                    <div style="display: flex;justify-content: space-between; padding: 10px 10px 0 10px; align-items: center;">
                                        <div style="font-size: 10px;">
                                            <span style="width: 72.5px;color: gray;">所属企业：</span>
                                            <span>黑龙江小康龙江集团有限公司</span>
                                        </div>
                                    </div>
                                    <div style="font-size: 10px; width: 70%; position: relative; flex-shrink: 0;height: 100%;">
                                        <div style="flex-shrink: 1; border-radius: 10px; width: 100px;height: 100px;">
                                            <el-image src="./img/t1.png" style="border-radius: 10px; width: 100%; height: 100%;" fit="cover"></el-image>
                                        </div> 
                                        <div style="font-size: 10px ;">

                                        </div>
                                        <span style="width: 72.5px;color: gray; width: 43%;">供应品种:</span>
                                    </div>
                                </div>
                            </el-carousel-item>
                        </el-carousel>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>`,
});
// 假设你有一个Vue组件 MyComponent
// Vue.component('my-component', {
//     template: '<div>这是一个自定义组件</div>'
//   });

//   // 在点击事件处理函数中
//   function addComponent() {
//     // 创建一个新的Vue实例
//     const vm = new Vue({
//       render(h) {
//         return h('my-component');
//       }
//     }).$mount(); // 注意这里没有传递el选项，因此不会立即挂载

//     // 使用jQuery（或原生JS）将Vue实例的根元素添加到DOM中
//     $('#some-container').append(vm.$el);
//   }

//   // 绑定点击事件
// $('#addButton').click(addComponent);
new Vue({
  el: "#app",
  data() {
    return {
      activeNames: ["1", "2", "3", "4"],
      //渲染层
      form: [
        // {
        //     title: 'Box',
        //     config: 'BoxConfig',
        //     layer: true,
        //     id: createUniqueString(),
        //     style: {
        //         backgroundColor: '#fff',
        //         borderBottom: '1px solid #dee2e6'
        //     },
        //     slot: [{
        //         title: 'PlateCore',
        //         config: 'PlateCoreConfig',
        //         layer: false,
        //         id: createUniqueString(),
        //         data: {
        //             width: '1200',
        //             widthUnit: 'px'
        //         },
        //         slot: [{
        //             title: 'row',
        //             config: 'rowConfig',
        //             layer: false,
        //             id: createUniqueString(),
        //             data: {
        //                 gutter: 0,//栅格间隔
        //                 type: false,//type布局模式，可选flex
        //                 justify: 'start',//flex布局下水平排列方式
        //                 align: 'top',//flex布局下垂直排列方式
        //                 tag: 'div',//自定义标签元素类型
        //             },
        //             slot: [{
        //                 title: 'rowItem',
        //                 config: 'rowItemConfig',
        //                 layer: false,
        //                 id: createUniqueString(),
        //                 data: {
        //                     minHeight: 0,//最小高度
        //                     minHeightUnit: 'px',//最小高度单位
        //                     span: 20,//栅格占据的列数
        //                     offset: 0,//栅格左侧的间隔格数
        //                     push: 0,//栅格向右移动格数
        //                     pull: 0,//栅格向左移动格数
        //                     xs: false,//<768px 响应式栅格数或者栅格属性对象
        //                     sm: false,//≥768px 响应式栅格数或者栅格属性对象
        //                     md: false,//≥992px 响应式栅格数或者栅格属性对象
        //                     lg: false,//≥1200px 响应式栅格数或者栅格属性对象
        //                     xl: false,//≥1920px 响应式栅格数或者栅格属性对象
        //                     tag: 'div'//自定义元素标签
        //                 },
        //                 slot: [{
        //                     title: 'Box',
        //                     config: 'BoxConfig',
        //                     layer: false,
        //                     id: createUniqueString(),
        //                     style: {
        //                         display: 'flex',
        //                         alignItems: 'center',
        //                         height: '75px',
        //                     },
        //                     slot: [{
        //                         title: 'Pic',
        //                         config: 'PicConfig',
        //                         layer: false,
        //                         id: createUniqueString(),
        //                         data: {
        //                             width: 45,
        //                             widthUnit: 'px',
        //                             height: 45,
        //                             heightUnit: 'px',
        //                             top: 0,
        //                             topUnit: 'px',
        //                             bottom: 0,
        //                             bottomUnit: 'px',
        //                             left: 0,
        //                             leftUnit: 'px',
        //                             right: 0,
        //                             rightUnit: 'px',
        //                             fit: 'cover',
        //                             radius: 0
        //                         }
        //                     }, {
        //                         title: 'TextBox',
        //                         config: 'TextBoxConfig',
        //                         layer: false,
        //                         id: createUniqueString(),
        //                         data: {
        //                             fontSize: '20',
        //                             fontSizeUnit: 'px',
        //                             color: '#28a745',
        //                             backgroundColor: '',
        //                             fontWeight: 900,
        //                             top: 0,
        //                             topUnit: 'px',
        //                             bottom: 0,
        //                             bottomUnit: 'px',
        //                             left: 15,
        //                             leftUnit: 'px',
        //                             right: 0,
        //                             rightUnit: 'px',
        //                             text: '众菌联'
        //                         }
        //                     }, {
        //                         title: 'TextBox',
        //                         config: 'TextBoxConfig',
        //                         layer: false,
        //                         id: createUniqueString(),
        //                         data: {
        //                             fontSize: '23',
        //                             fontSizeUnit: 'px',
        //                             color: '',
        //                             backgroundColor: '',
        //                             fontWeight: 700,
        //                             top: 0,
        //                             topUnit: 'px',
        //                             bottom: 0,
        //                             bottomUnit: 'px',
        //                             left: 20,
        //                             leftUnit: 'px',
        //                             right: 0,
        //                             rightUnit: 'px',
        //                             text: '黑龙江长尾供应链服务有限公司'
        //                         },
        //                     }, {
        //                         title: 'TextBox',
        //                         config: 'TextBoxConfig',
        //                         layer: false,
        //                         id: createUniqueString(),
        //                         data: {
        //                             fontSize: '20',
        //                             fontSizeUnit: 'px',
        //                             color: '',
        //                             backgroundColor: '',
        //                             fontWeight: 0,
        //                             top: 0,
        //                             topUnit: 'px',
        //                             bottom: 0,
        //                             bottomUnit: 'px',
        //                             left: 50,
        //                             leftUnit: 'px',
        //                             right: 0,
        //                             rightUnit: 'px',
        //                             text: '服务热线:'
        //                         },
        //                     }, {
        //                         title: 'TextBox',
        //                         config: 'TextBoxConfig',
        //                         layer: false,
        //                         id: createUniqueString(),
        //                         data: {
        //                             fontSize: '17',
        //                             fontSizeUnit: 'px',
        //                             color: '',
        //                             backgroundColor: '',
        //                             fontWeight: 0,
        //                             top: 0,
        //                             topUnit: 'px',
        //                             bottom: 0,
        //                             bottomUnit: 'px',
        //                             left: 0,
        //                             leftUnit: 'px',
        //                             right: 0,
        //                             rightUnit: 'px',
        //                             text: '18640249522'
        //                         },
        //                     }, {
        //                         title: 'TextDate',
        //                         config: 'TextDateConfig',
        //                         layer: false,
        //                         id: createUniqueString(),
        //                         data: {
        //                             fontSize: '17',
        //                             fontSizeUnit: 'px',
        //                             color: '',
        //                             fontWeight: 0,
        //                             top: 0,
        //                             topUnit: 'px',
        //                             bottom: 0,
        //                             bottomUnit: 'px',
        //                             left: 30,
        //                             leftUnit: 'px',
        //                             right: 0,
        //                             rightUnit: 'px',
        //                         },
        //                     }]
        //                 }]
        //             }, {
        //                 title: 'rowItem',
        //                 config: 'rowItemConfig',
        //                 layer: false,
        //                 id: createUniqueString(),
        //                 data: {
        //                     minHeight: 0,//最小高度
        //                     minHeightUnit: 'px',//最小高度单位
        //                     span: 2,//栅格占据的列数
        //                     offset: 0,//栅格左侧的间隔格数
        //                     push: 2,//栅格向右移动格数
        //                     pull: 0,//栅格向左移动格数
        //                     xs: false,//<768px 响应式栅格数或者栅格属性对象
        //                     sm: false,//≥768px 响应式栅格数或者栅格属性对象
        //                     md: false,//≥992px 响应式栅格数或者栅格属性对象
        //                     lg: false,//≥1200px 响应式栅格数或者栅格属性对象
        //                     xl: false,//≥1920px 响应式栅格数或者栅格属性对象
        //                     tag: 'div'//自定义元素标签
        //                 },
        //                 slot: [{
        //                     title: 'Box',
        //                     config: 'BoxConfig',
        //                     layer: false,
        //                     id: createUniqueString(),
        //                     style: {
        //                         width: '100px',
        //                         height: '75px',
        //                         display: 'flex',
        //                         alignItems: 'center',
        //                         justifyContent: 'space-between'
        //                     },
        //                     slot: [{
        //                         title: 'TextBox',
        //                         config: 'TextBoxConfig',
        //                         layer: false,
        //                         id: createUniqueString(),
        //                         data: {
        //                             fontSize: '20',
        //                             fontSizeUnit: 'px',
        //                             color: '',
        //                             backgroundColor: '',
        //                             fontWeight: 0,
        //                             top: 0,
        //                             topUnit: 'px',
        //                             bottom: 0,
        //                             bottomUnit: 'px',
        //                             left: 0,
        //                             leftUnit: 'px',
        //                             right: 0,
        //                             rightUnit: 'px',
        //                             text: '登录'
        //                         }
        //                     }, {
        //                         title: 'TextBox',
        //                         config: 'TextBoxConfig',
        //                         layer: false,
        //                         id: createUniqueString(),
        //                         data: {
        //                             fontSize: '20',
        //                             fontSizeUnit: 'px',
        //                             color: '',
        //                             backgroundColor: '',
        //                             fontWeight: 0,
        //                             top: 0,
        //                             topUnit: 'px',
        //                             bottom: 0,
        //                             bottomUnit: 'px',
        //                             left: 0,
        //                             leftUnit: 'px',
        //                             right: 0,
        //                             rightUnit: 'px',
        //                             text: '注册'
        //                         },
        //                     }]
        //                 }]
        //             }]
        //         }]
        //     }]
        // },
        // {
        //     title: 'Box',
        //     config: 'BoxConfig',
        //     layer: true,
        //     id: createUniqueString(),
        //     style: {
        //         backgroundColor: '#fff',
        //     },
        //     slot: [{
        //         title: 'PlateCore',
        //         config: 'PlateCoreConfig',
        //         layer: false,
        //         id: createUniqueString(),
        //         data: {
        //             width: '1200',
        //             widthUnit: 'px'
        //         },
        //         slot: [{
        //             title: 'NavMenu',
        //             config: 'NavMenuConfig',
        //             layer: false,
        //             id: createUniqueString(),
        //             data: {
        //                 fontSize: 16,
        //                 fontSizeUnit: 'px',
        //                 fontWeight: 700,
        //                 top: 0,
        //                 topUnit: 'px',
        //                 bottom: 0,
        //                 bottomUnit: 'px',
        //                 left: 0,
        //                 leftUnit: 'px',
        //                 right: 0,
        //                 rightUnit: 'px',
        //                 mode: 'horizontal',//vertical,
        //                 hoverTextColor: '#28a745',
        //                 TextColor: '#000',
        //                 backgroundColor: '',
        //                 Children: {
        //                     navName: [{
        //                         name: '首页',
        //                         url:'http://localhost:8081/dist/h5XKLJ/#/pages/index/index'
        //                     }, {
        //                         name: '供应大厅',
        //                         url:'http://localhost:8081/dist/h5XKLJ/#/pages/index/supply'
        //                     }, {
        //                         name: '采购大厅',
        //                         url:'http://localhost:8081/dist/h5XKLJ/#/pages/index/purchase'
        //                     }, {
        //                         name: '用户专区',
        //                         url:'http://localhost:8081/dist/h5XKLJ/#/pages/index/enterprise'
        //                     }, {
        //                         name: '资讯中心',
        //                         url:'http://localhost:8081/dist/h5XKLJ/#/pages/index/consult'
        //                     }, {
        //                         name: '金融服务',
        //                         url:'http://localhost:8081/dist/h5XKLJ/#/pages/index/EnterpriseServices'
        //                     }, {
        //                         name: '产品商城',
        //                         url:'https://marketing.xiaokanglongjiang.com/dist/h5XKLJShop/index.html#/'
        //                     }, {
        //                         name: '关于我们',
        //                         url:'http://localhost:8081/dist/h5XKLJ/#/pages/index/Aboutus'
        //                     }]
        //                 }
        //             }
        //         }]
        //     }]
        // },
        // {
        //     title: 'Box',
        //     config: 'BoxConfig',
        //     layer: true,
        //     id: createUniqueString(),
        //     style: {
        //         paddingTop: '20px',
        //     },
        //     slot: [{
        //         title: 'PlateCore',
        //         config: 'PlateCoreConfig',
        //         layer: false,
        //         id: createUniqueString(),
        //         data: {
        //             width: '1200',
        //             widthUnit: 'px'
        //         },
        //         slot: [{
        //             title: 'row',
        //             config: 'rowConfig',
        //             layer: false,
        //             id: createUniqueString(),
        //             data: {
        //                 gutter: 20,//栅格间隔
        //                 type: false,//type布局模式，可选flex
        //                 justify: 'start',//flex布局下水平排列方式
        //                 align: 'top',//flex布局下垂直排列方式
        //                 tag: 'div',//自定义标签元素类型
        //             },
        //             slot: [{
        //                 title: 'rowItem',
        //                 config: 'rowItemConfig',
        //                 layer: false,
        //                 id: createUniqueString(),
        //                 data: {
        //                     minHeight: 0,//最小高度
        //                     minHeightUnit: 'px',//最小高度单位
        //                     span: 18,//栅格占据的列数
        //                     offset: 0,//栅格左侧的间隔格数
        //                     push: 0,//栅格向右移动格数
        //                     pull: 0,//栅格向左移动格数
        //                     xs: false,//<768px 响应式栅格数或者栅格属性对象
        //                     sm: false,//≥768px 响应式栅格数或者栅格属性对象
        //                     md: false,//≥992px 响应式栅格数或者栅格属性对象
        //                     lg: false,//≥1200px 响应式栅格数或者栅格属性对象
        //                     xl: false,//≥1920px 响应式栅格数或者栅格属性对象
        //                     tag: 'div'//自定义元素标签
        //                 },
        //                 slot: [{
        //                     title: 'Swiper',
        //                     config: 'SwiperConfig',
        //                     layer: false,
        //                     id: createUniqueString(),
        //                     data: {
        //                         arrow: 'always',//切换箭头展示
        //                         times: 2,//轮播时长 单位:s
        //                         type: "",//类型 空:默认  card:卡片化
        //                         trigger: "click",//指示器触发条件
        //                         radius: 0,//圆角弧度
        //                         left: 0,//左边距
        //                         leftUnit: 'px',//左边距单位
        //                         right: 0,//右边距
        //                         rightUnit: 'px',//右边距单位
        //                         top: 0,//上边距
        //                         topUnit: 'px',//上边距单位
        //                         bottom: 0,//下边距
        //                         bottomUnit: 'px',//下边距单位
        //                         direction: 'horizontal',//滚动方向 水平:horizontal 垂直:vertical
        //                         height: 475,//高度
        //                         heightUnit: 'px',//高度单位
        //                         width: '100',
        //                         widthUnit: '%',//长度单位
        //                         Children: {
        //                             image: [{
        //                                 id: 1,
        //                                 src: './img/t1.png',
        //                                 fit: 'fill'
        //                             }, {
        //                                 id: 2,
        //                                 src: './img/t2.png',
        //                                 fit: 'fill'
        //                             }, {
        //                                 id: 3,
        //                                 src: './img/t3.png',
        //                                 fit: 'fill'
        //                             }]
        //                         }
        //                     }
        //                 }]
        //             }, {
        //                 title: 'rowItem',
        //                 config: 'rowItemConfig',
        //                 layer: false,
        //                 id: createUniqueString(),
        //                 data: {
        //                     minHeight: 0,//最小高度
        //                     minHeightUnit: 'px',//最小高度单位
        //                     span: 6,//栅格占据的列数
        //                     offset: 0,//栅格左侧的间隔格数
        //                     push: 0,//栅格向右移动格数
        //                     pull: 0,//栅格向左移动格数
        //                     xs: false,//<768px 响应式栅格数或者栅格属性对象
        //                     sm: false,//≥768px 响应式栅格数或者栅格属性对象
        //                     md: false,//≥992px 响应式栅格数或者栅格属性对象
        //                     lg: false,//≥1200px 响应式栅格数或者栅格属性对象
        //                     xl: false,//≥1920px 响应式栅格数或者栅格属性对象
        //                     tag: 'div'//自定义元素标签
        //                 },
        //                 slot: [{
        //                     title: 'Login',
        //                     config: 'BoxConfig',
        //                     layer: false,
        //                     id: createUniqueString(),
        //                 }]
        //             }]
        //         }]
        //     }]
        // },
        // {
        //     title: 'Box',
        //     config: 'BoxConfig',
        //     layer: true,
        //     id: createUniqueString(),
        //     style: {
        //         paddingTop: '20px',
        //     },
        //     slot: [{
        //         title: 'PlateCore',
        //         config: 'PlateCoreConfig',
        //         layer: false,
        //         id: createUniqueString(),
        //         data: {
        //             width: '1200',
        //             widthUnit: 'px'
        //         },
        //         slot: [{
        //             title: 'row',
        //             config: 'rowConfig',
        //             layer: false,
        //             id: createUniqueString(),
        //             data: {
        //                 gutter: 0,//栅格间隔
        //                 type: false,//type布局模式，可选flex
        //                 justify: 'start',//flex布局下水平排列方式
        //                 align: 'top',//flex布局下垂直排列方式
        //                 tag: 'div',//自定义标签元素类型
        //             },
        //             slot: [{
        //                 title: 'rowItem',
        //                 config: 'rowItemConfig',
        //                 layer: false,
        //                 id: createUniqueString(),
        //                 data: {
        //                     minHeight: 0,//最小高度
        //                     minHeightUnit: 'px',//最小高度单位
        //                     span: 24,//栅格占据的列数
        //                     offset: 0,//栅格左侧的间隔格数
        //                     push: 0,//栅格向右移动格数
        //                     pull: 0,//栅格向左移动格数
        //                     xs: false,//<768px 响应式栅格数或者栅格属性对象
        //                     sm: false,//≥768px 响应式栅格数或者栅格属性对象
        //                     md: false,//≥992px 响应式栅格数或者栅格属性对象
        //                     lg: false,//≥1200px 响应式栅格数或者栅格属性对象
        //                     xl: false,//≥1920px 响应式栅格数或者栅格属性对象
        //                     tag: 'div'//自定义元素标签
        //                 },
        //                 slot: [{
        //                     title: 'Plate',
        //                     config: '',
        //                     layer: false,
        //                     id: createUniqueString(),
        //                     data: {
        //                     }
        //                 }]
        //             }]
        //         }]
        //     }]
        // },
        // {
        //     title: 'Box',
        //     config: 'BoxConfig',
        //     layer: true,
        //     id: createUniqueString(),
        //     style: {
        //         paddingTop: '20px',
        //     },
        //     slot: [{
        //         title: 'PlateCore',
        //         config: 'PlateCoreConfig',
        //         layer: false,
        //         id: createUniqueString(),
        //         data: {
        //             width: '1200',
        //             widthUnit: 'px'
        //         },
        //         slot: [{
        //             title: 'row',
        //             config: 'rowConfig',
        //             layer: false,
        //             id: createUniqueString(),
        //             data: {
        //                 gutter: 0,//栅格间隔
        //                 type: false,//type布局模式，可选flex
        //                 justify: 'start',//flex布局下水平排列方式
        //                 align: 'top',//flex布局下垂直排列方式
        //                 tag: 'div',//自定义标签元素类型
        //             },
        //             slot: [{
        //                 title: 'rowItem',
        //                 config: 'rowItemConfig',
        //                 layer: false,
        //                 id: createUniqueString(),
        //                 data: {
        //                     minHeight: 0,//最小高度
        //                     minHeightUnit: 'px',//最小高度单位
        //                     span: 24,//栅格占据的列数
        //                     offset: 0,//栅格左侧的间隔格数
        //                     push: 0,//栅格向右移动格数
        //                     pull: 0,//栅格向左移动格数
        //                     xs: false,//<768px 响应式栅格数或者栅格属性对象
        //                     sm: false,//≥768px 响应式栅格数或者栅格属性对象
        //                     md: false,//≥992px 响应式栅格数或者栅格属性对象
        //                     lg: false,//≥1200px 响应式栅格数或者栅格属性对象
        //                     xl: false,//≥1920px 响应式栅格数或者栅格属性对象
        //                     tag: 'div'//自定义元素标签
        //                 },
        //                 slot: [{
        //                     title: 'Object',
        //                     config: 'ObjectConfig',
        //                     layer: false,
        //                     id: createUniqueString(),
        //                     data: {
        //                         width: 100,
        //                         widthUnit: '%',
        //                         height: 600,
        //                         heightUnit: 'px',
        //                         left: 0,//左边距
        //                         leftUnit: 'px',//左边距单位
        //                         right: 0,//右边距
        //                         rightUnit: 'px',//右边距单位
        //                         top: 0,//上边距
        //                         topUnit: 'px',//上边距单位
        //                         bottom: 0,//下边距
        //                         bottomUnit: 'px',//下边距单位
        //                         url: 'https://marketing.xiaokanglongjiang.com/dist/OrderData/index2.html',
        //                         type: 'text/html'
        //                     },
        //                 }]
        //             }]
        //         }]
        //     }]
        // },
        // {
        //     title: 'Box',
        //     config: 'BoxConfig',
        //     layer: true,
        //     id: createUniqueString(),
        //     style: {
        //         paddingTop: '20px',
        //     },
        //     slot: [{
        //         title: 'PlateCore',
        //         config: 'PlateCoreConfig',
        //         layer: false,
        //         id: createUniqueString(),
        //         data: {
        //             width: '1200',
        //             widthUnit: 'px'
        //         },
        //         slot: [{
        //             title: 'row',
        //             config: 'rowConfig',
        //             layer: false,
        //             id: createUniqueString(),
        //             data: {
        //                 gutter: 0,//栅格间隔
        //                 type: false,//type布局模式，可选flex
        //                 justify: 'start',//flex布局下水平排列方式
        //                 align: 'top',//flex布局下垂直排列方式
        //                 tag: 'div',//自定义标签元素类型
        //             },
        //             slot: [{
        //                 title: 'rowItem',
        //                 config: 'rowItemConfig',
        //                 layer: false,
        //                 id: createUniqueString(),
        //                 data: {
        //                     minHeight: 0,//最小高度
        //                     minHeightUnit: 'px',//最小高度单位
        //                     span: 24,//栅格占据的列数
        //                     offset: 0,//栅格左侧的间隔格数
        //                     push: 0,//栅格向右移动格数
        //                     pull: 0,//栅格向左移动格数
        //                     xs: false,//<768px 响应式栅格数或者栅格属性对象
        //                     sm: false,//≥768px 响应式栅格数或者栅格属性对象
        //                     md: false,//≥992px 响应式栅格数或者栅格属性对象
        //                     lg: false,//≥1200px 响应式栅格数或者栅格属性对象
        //                     xl: false,//≥1920px 响应式栅格数或者栅格属性对象
        //                     tag: 'div'//自定义元素标签
        //                 },
        //                 slot: [{
        //                     title: 'TablePlate',
        //                     config: '',
        //                     layer: false,
        //                     id: createUniqueString(),
        //                 }]
        //             }]
        //         }]
        //     }]
        // },
        // {
        //     title: 'Box',
        //     config: 'BoxConfig',
        //     layer: true,
        //     id: createUniqueString(),
        //     style: {
        //         paddingTop: '20px',
        //     },
        //     slot: [{
        //         title: 'PlateCore',
        //         config: 'PlateCoreConfig',
        //         layer: false,
        //         id: createUniqueString(),
        //         data: {
        //             width: '1200',
        //             widthUnit: 'px'
        //         },
        //         slot: [{
        //             title: 'row',
        //             config: 'rowConfig',
        //             layer: false,
        //             id: createUniqueString(),
        //             data: {
        //                 gutter: 0,//栅格间隔
        //                 type: false,//type布局模式，可选flex
        //                 justify: 'start',//flex布局下水平排列方式
        //                 align: 'top',//flex布局下垂直排列方式
        //                 tag: 'div',//自定义标签元素类型
        //             },
        //             slot: [{
        //                 title: 'rowItem',
        //                 config: 'rowItemConfig',
        //                 layer: false,
        //                 id: createUniqueString(),
        //                 data: {
        //                     minHeight: 0,//最小高度
        //                     minHeightUnit: 'px',//最小高度单位
        //                     span: 24,//栅格占据的列数
        //                     offset: 0,//栅格左侧的间隔格数
        //                     push: 0,//栅格向右移动格数
        //                     pull: 0,//栅格向左移动格数
        //                     xs: false,//<768px 响应式栅格数或者栅格属性对象
        //                     sm: false,//≥768px 响应式栅格数或者栅格属性对象
        //                     md: false,//≥992px 响应式栅格数或者栅格属性对象
        //                     lg: false,//≥1200px 响应式栅格数或者栅格属性对象
        //                     xl: false,//≥1920px 响应式栅格数或者栅格属性对象
        //                     tag: 'div'//自定义元素标签
        //                 },
        //                 slot: [{
        //                     title: 'TablePlate',
        //                     config: '',
        //                     layer: false,
        //                     id: createUniqueString(),
        //                 }]
        //             }]
        //         }]
        //     }]
        // },
        // {
        //     title: 'Box',
        //     config: 'BoxConfig',
        //     layer: true,
        //     id: createUniqueString(),
        //     style: {
        //         paddingTop: '20px',
        //     },
        //     slot: [{
        //         title: 'PlateCore',
        //         config: 'PlateCoreConfig',
        //         layer: false,
        //         id: createUniqueString(),
        //         data: {
        //             width: '1200',
        //             widthUnit: 'px'
        //         },
        //         slot: [{
        //             title: 'row',
        //             config: 'rowConfig',
        //             layer: false,
        //             id: createUniqueString(),
        //             data: {
        //                 gutter: 0,//栅格间隔
        //                 type: false,//type布局模式，可选flex
        //                 justify: 'start',//flex布局下水平排列方式
        //                 align: 'top',//flex布局下垂直排列方式
        //                 tag: 'div',//自定义标签元素类型
        //             },
        //             slot: [{
        //                 title: 'rowItem',
        //                 config: 'rowItemConfig',
        //                 layer: false,
        //                 id: createUniqueString(),
        //                 data: {
        //                     minHeight: 0,//最小高度
        //                     minHeightUnit: 'px',//最小高度单位
        //                     span: 24,//栅格占据的列数
        //                     offset: 0,//栅格左侧的间隔格数
        //                     push: 0,//栅格向右移动格数
        //                     pull: 0,//栅格向左移动格数
        //                     xs: false,//<768px 响应式栅格数或者栅格属性对象
        //                     sm: false,//≥768px 响应式栅格数或者栅格属性对象
        //                     md: false,//≥992px 响应式栅格数或者栅格属性对象
        //                     lg: false,//≥1200px 响应式栅格数或者栅格属性对象
        //                     xl: false,//≥1920px 响应式栅格数或者栅格属性对象
        //                     tag: 'div'//自定义元素标签
        //                 },
        //                 slot: [{
        //                     title: 'NewsPlate',
        //                     config: '',
        //                     layer: false,
        //                     id: createUniqueString(),
        //                 }]
        //             }]
        //         }]
        //     }]
        // }, {
        //     title: 'Box',
        //     config: 'BoxConfig',
        //     layer: true,
        //     id: createUniqueString(),
        //     style: {
        //         paddingTop: '20px',
        //     },
        //     slot: [{
        //         title: 'PlateCore',
        //         config: 'PlateCoreConfig',
        //         layer: false,
        //         id: createUniqueString(),
        //         data: {
        //             width: '1200',
        //             widthUnit: 'px'
        //         },
        //         slot: [{
        //             title: 'row',
        //             config: 'rowConfig',
        //             layer: false,
        //             id: createUniqueString(),
        //             data: {
        //                 gutter: 0,//栅格间隔
        //                 type: false,//type布局模式，可选flex
        //                 justify: 'start',//flex布局下水平排列方式
        //                 align: 'top',//flex布局下垂直排列方式
        //                 tag: 'div',//自定义标签元素类型
        //             },
        //             slot: [{
        //                 title: 'rowItem',
        //                 config: 'rowItemConfig',
        //                 layer: false,
        //                 id: createUniqueString(),
        //                 data: {
        //                     minHeight: 0,//最小高度
        //                     minHeightUnit: 'px',//最小高度单位
        //                     span: 24,//栅格占据的列数
        //                     offset: 0,//栅格左侧的间隔格数
        //                     push: 0,//栅格向右移动格数
        //                     pull: 0,//栅格向左移动格数
        //                     xs: false,//<768px 响应式栅格数或者栅格属性对象
        //                     sm: false,//≥768px 响应式栅格数或者栅格属性对象
        //                     md: false,//≥992px 响应式栅格数或者栅格属性对象
        //                     lg: false,//≥1200px 响应式栅格数或者栅格属性对象
        //                     xl: false,//≥1920px 响应式栅格数或者栅格属性对象
        //                     tag: 'div'//自定义元素标签
        //                 },
        //                 slot: [{
        //                     title: 'ProvincePlate',
        //                     config: '',
        //                     layer: false,
        //                     id: createUniqueString(),
        //                 }]
        //             }]
        //         }]
        //     }]
        // }, {
        //     title: 'Box',
        //     config: 'BoxConfig',
        //     layer: true,
        //     id: createUniqueString(),
        //     style: {
        //         marginTop: '20px',
        //         backgroundColor: '#343a40',
        //         height: '75px'
        //     },
        //     slot: [{
        //         title: 'PlateCore',
        //         config: 'PlateCoreConfig',
        //         layer: false,
        //         id: createUniqueString(),
        //         data: {
        //             width: '1200',
        //             widthUnit: 'px'
        //         },
        //         style: {
        //         },
        //         slot: [{
        //             title: 'PlateCore',
        //             config: 'PlateCoreConfig',
        //             layer: false,
        //             id: createUniqueString(),
        //             data: {
        //                 width: '1200',
        //                 widthUnit: 'px'
        //             },
        //         }]
        //     }]
        // }
        // {
        //     title: 'PlateCore',
        //     config: 'PlateCoreConfig',
        //     layer: true,
        //     id: createUniqueString(),
        //     data: {
        //         width: '1200',
        //         widthUnit: 'px'
        //     },
        //     slot: [{
        //         title: 'ylForm',
        //         config: 'ylFormConfig',
        //         layer: false,
        //         id: createUniqueString(),
        //         data: {
        //             form:{},
        //             rules:{},
        //             components:[{
        //                 title:'ylTitle',
        //                 config:{
        //                     title:'确认收货地址',//名
        //                     height:46,//高度
        //                     heightUnit:'px',//高度单位
        //                     fontWeight:'bold',//文字粗细
        //                     backgroundColor:'rgb(245,245,245)',//组件背景颜色
        //                     textBackgroundColor:'#fff',//文字区域背景颜色
        //                     textAlign:'center',//文字位置
        //                     textWidth:200,//文字区域宽度
        //                     textWidthUnit:'px',
        //                     color:'#000',//文字颜色
        //                     borderTopWidth: 2.5,
        //                     borderTopWidthUnit:'px',
        //                     borderTopStyle:'solid',
        //                     borderTopColor:'#67C23A',
        //                     borderBottomWidth:0,
        //                     borderBottomWidthUnit:'',
        //                     borderBottomStyle:'',
        //                     borderBottomColor:'',
        //                     borderLeftWidth:0,
        //                     borderLeftWidthUnit:'',
        //                     borderLeftStyle:'',
        //                     borderLeftColor:'',
        //                     borderRightWidth:0,
        //                     borderRightWidthUnit:'',
        //                     borderRightStyle:'',
        //                     borderRightColor:'',
        //                     boxShadow:true,
        //                 }
        //             },{
        //                 title:'ylDescriptions',
        //                 config:{
        //                     column:2,
        //                     left:'0',
        //                     leftUnit:'px',
        //                     top:'10',
        //                     topUnit:'px',
        //                     right:'0',
        //                     rightUnit:'px',
        //                     bottom:'10',
        //                     bottomUnit:'px',
        //                     components:[{//组件
        //                         title:'elInput',
        //                         props:'Buyer_Contact',
        //                         label:'收货人',
        //                         config:{
        //                             disabled:false,
        //                             clearable:true,
        //                             placeholder:'请输入收货人',
        //                             showPassword:false,
        //                             suffixIcon:'',
        //                             prefixIcon:'',
        //                             width:100,
        //                             widthUnit:'%',
        //                             type:'text',
        //                         }
        //                     },{//组件
        //                         title:'ylInput',
        //                         props:'Buyer_Contact_Phone',
        //                         label:'手机号',
        //                         config:{
        //                             disabled:false,
        //                             clearable:true,
        //                             placeholder:'请选择',
        //                             showPassword:false,
        //                             suffixIcon:'',
        //                             prefixIcon:'',
        //                             width:100,
        //                             widthUnit:'%',
        //                             type:'text',
        //                         }
        //                     },{//组件
        //                         title:'ylInput',
        //                         props:'Buyer_Contact_Phone',
        //                         label:'地址',
        //                         config:{
        //                             disabled:false,
        //                             clearable:true,
        //                             placeholder:'请选择',
        //                             showPassword:false,
        //                             suffixIcon:'',
        //                             prefixIcon:'',
        //                             width:100,
        //                             widthUnit:'%',
        //                             type:'text',
        //                         }
        //                     },{
        //                         title:'ylInput',
        //                         props:'addressDetail',
        //                         label:'详细地址',
        //                         config:{
        //                             disabled:false,
        //                             clearable:true,
        //                             placeholder:'请输入详情地址',
        //                             showPassword:false,
        //                             suffixIcon:'',
        //                             prefixIcon:'',
        //                             width:100,
        //                             widthUnit:'%',
        //                             type:'text',
        //                         }
        //                     }]
        //                 }
        //             },{
        //                 title:'ylTitle',
        //                 config:{
        //                     title:'选择交收方式',//名
        //                     height:46,//高度
        //                     heightUnit:'px',//高度单位
        //                     fontWeight:'bold',//文字粗细
        //                     backgroundColor:'rgb(245,245,245)',//组件背景颜色
        //                     textBackgroundColor:'#fff',//文字区域背景颜色
        //                     textAlign:'center',//文字位置
        //                     textWidth:200,//文字区域宽度
        //                     textWidthUnit:'px',
        //                     color:'#000',//文字颜色
        //                     borderTopWidth: 2.5,
        //                     borderTopWidthUnit:'px',
        //                     borderTopStyle:'solid',
        //                     borderTopColor:'#67C23A',
        //                     borderBottomWidth:0,
        //                     borderBottomWidthUnit:'',
        //                     borderBottomStyle:'',
        //                     borderBottomColor:'',
        //                     borderLeftWidth:0,
        //                     borderLeftWidthUnit:'',
        //                     borderLeftStyle:'',
        //                     borderLeftColor:'',
        //                     borderRightWidth:0,
        //                     borderRightWidthUnit:'',
        //                     borderRightStyle:'',
        //                     borderRightColor:'',
        //                     boxShadow:true,
        //                 }
        //             },{
        //                 title:'ylDescriptions',
        //                 config:{
        //                     column:2,
        //                     left:'0',
        //                     leftUnit:'px',
        //                     top:'10',
        //                     topUnit:'px',
        //                     right:'0',
        //                     rightUnit:'px',
        //                     bottom:'10',
        //                     bottomUnit:'px',
        //                     components:[{//组件
        //                         title:'ylInput',
        //                         props:'Payment_SerialNumber',
        //                         label:'打款方式',
        //                         config:{
        //                             disabled:false,
        //                             clearable:true,
        //                             placeholder:'请输入收货人',
        //                             showPassword:false,
        //                             suffixIcon:'',
        //                             prefixIcon:'',
        //                             width:100,
        //                             widthUnit:'%',
        //                             type:'text',
        //                         }
        //                     },{//组件
        //                         title:'ylInput',
        //                         props:'Shipment_SerialNumber',
        //                         label:'装运方式',
        //                         config:{
        //                             disabled:false,
        //                             clearable:true,
        //                             placeholder:'请选择',
        //                             showPassword:false,
        //                             suffixIcon:'',
        //                             prefixIcon:'',
        //                             width:100,
        //                             widthUnit:'%',
        //                             type:'text',
        //                         }
        //                     },{//组件
        //                         title:'ylInput',
        //                         props:'Transport_SerialNumber',
        //                         label:'运输方式',
        //                         config:{
        //                             disabled:false,
        //                             clearable:true,
        //                             placeholder:'请选择',
        //                             showPassword:false,
        //                             suffixIcon:'',
        //                             prefixIcon:'',
        //                             width:100,
        //                             widthUnit:'%',
        //                             type:'text',
        //                         }
        //                     },{
        //                         title:'ylInput',
        //                         props:'Trading_Name',
        //                         label:'付款方式',
        //                         config:{
        //                             disabled:false,
        //                             clearable:true,
        //                             placeholder:'请输入付款方式',
        //                             showPassword:false,
        //                             suffixIcon:'',
        //                             prefixIcon:'',
        //                             width:100,
        //                             widthUnit:'%',
        //                             type:'text',
        //                         }
        //                     }]
        //                 }
        //             },{
        //                 title:'ylTitle',
        //                 config:{
        //                     title:'付款周期细则',//名
        //                     height:46,//高度
        //                     heightUnit:'px',//高度单位
        //                     fontWeight:'bold',//文字粗细
        //                     backgroundColor:'rgb(245,245,245)',//组件背景颜色
        //                     textBackgroundColor:'#fff',//文字区域背景颜色
        //                     textAlign:'center',//文字位置
        //                     textWidth:200,//文字区域宽度
        //                     textWidthUnit:'px',
        //                     color:'#000',//文字颜色
        //                     borderTopWidth: 2.5,
        //                     borderTopWidthUnit:'px',
        //                     borderTopStyle:'solid',
        //                     borderTopColor:'#67C23A',
        //                     borderBottomWidth:0,
        //                     borderBottomWidthUnit:'',
        //                     borderBottomStyle:'',
        //                     borderBottomColor:'',
        //                     borderLeftWidth:0,
        //                     borderLeftWidthUnit:'',
        //                     borderLeftStyle:'',
        //                     borderLeftColor:'',
        //                     borderRightWidth:0,
        //                     borderRightWidthUnit:'',
        //                     borderRightStyle:'',
        //                     borderRightColor:'',
        //                     boxShadow:true,
        //                 }
        //             },{
        //             }]
        //         },
        //     }]
        // }
        // {
        //     title: 'row',
        //     config: 'rowConfig',
        //     layer: true,
        //     id: createUniqueString(),
        //     data:{
        //         gutter:0,//栅格间隔
        //         type:false,//type布局模式，可选flex
        //         justify:'start',//flex布局下水平排列方式
        //         align:'top',//flex布局下垂直排列方式
        //         tag:'div',//自定义标签元素类型
        //     },
        // }
        // {
        //     title: 'row',
        //     config: 'rowConfig',
        //     layer: true,
        //     id: createUniqueString(),
        //     data:{
        //         gutter:0,//栅格间隔
        //         type:false,//type布局模式，可选flex
        //         justify:'start',//flex布局下水平排列方式
        //         align:'top',//flex布局下垂直排列方式
        //         tag:'div',//自定义标签元素类型
        //     },
        //     slot:[{
        //         title: 'rowItem',
        //         config: 'rowItemConfig',
        //         layer: false,
        //         id: createUniqueString(),
        //         data: {
        //             minHeight:100,//最小高度
        //             minHeightUnit:'px',//最小高度单位
        //             span:24,//栅格占据的列数
        //             offset:0,//栅格左侧的间隔格数
        //             push:0,//栅格向右移动格数
        //             pull:0,//栅格向左移动格数
        //             xs:false,//<768px 响应式栅格数或者栅格属性对象
        //             sm:false,//≥768px 响应式栅格数或者栅格属性对象
        //             md:false,//≥992px 响应式栅格数或者栅格属性对象
        //             lg:false,//≥1200px 响应式栅格数或者栅格属性对象
        //             xl:false,//≥1920px 响应式栅格数或者栅格属性对象
        //             tag:'div'//自定义元素标签
        //         },
        //         slot: []
        //     }]
        // },
        // {
        //     title: 'LiveBroadcast',
        //     config: 'LiveBroadcastConfig',
        //     layer: true,
        //     id: createUniqueString(),
        //     data:{
        //         img:'1'
        //     }
        // },
        // {
        //     title: 'PlateCore',
        //     config: 'PlateCoreConfig',
        //     layer: false,
        //     id: createUniqueString(),
        //     data: {
        //         width: '1200',
        //         widthUnit: 'px'
        //     },
        //     slot: [{
        //         title: 'glTable',
        //         config: 'glTableConfig',
        //         layer: true,
        //         id: createUniqueString(),
        //         data: {
        //             screen: {
        //             },
        //             table: {
        //                 width: 100,//长度
        //                 widthUnit: '%',//长度单位
        //                 height: 500,//高度
        //                 heightUnit: 'px',//高度单位
        //                 BASE_URL: 'https://marketing.xiaokanglongjiang.com/dist/imgxklj',//域名
        //                 size: 'medium',//表格尺寸
        //                 showHeader: true,//是否显示头部
        //                 fit: true,//列宽度是否自称撑开
        //                 border: true,//是否带有纵向边框
        //                 stripe: true,//是否为斑马纹table
        //                 highlightCurrentRow: false,//是否要高亮当前行
        //                 cellStyle: [{
        //                     unequal: false,
        //                     type: 'rowIndex',
        //                     prop:'',
        //                     condition: 1,
        //                     structure: 'color:red;'
        //                 }, {
        //                     unequal: false,
        //                     type: 'row',
        //                     prop: 'date',
        //                     condition: '2016-05-04',
        //                     structure: 'background-color:green; color:#fff;'
        //                 }],
        //                 thead: [{
        //                     label: "商品图片",
        //                     prop: "Picture_URL",
        //                     align: 'center',
        //                     isChildren:false,
        //                     isChildren_Old:false,
        //                     fixed: false,//固定位置
        //                     showOverflowTooltip: false,//过长时是否
        //                     width: "",
        //                     isImage:true,
        //                     isImage_Old:true,
        //                     image: {
        //                         width: '60',
        //                         widthUnit: 'px',
        //                         height: '60',
        //                         heightUnit: 'px',
        //                         fit: 'fill'
        //                     },
        //                 }, {
        //                     label: "商品名称",
        //                     prop: "Article_Name",
        //                     align: 'center',
        //                     isChildren:false,
        //                     isChildren_Old:false,
        //                     fixed: false,//固定位置
        //                     showOverflowTooltip: true,//过长时是否
        //                     width: "125",
        //                     isImage:false,
        //                     isImage_Old:false,
        //                 }, {
        //                     label: "商品类型",
        //                     prop: "Category_Name",
        //                     align: 'center',
        //                     isChildren:false,
        //                     isChildren_Old:false,
        //                     fixed: false,//固定位置
        //                     showOverflowTooltip: true,//过长时是否
        //                     width: "",
        //                     isImage:false,
        //                     isImage_Old:false,
        //                 }, {
        //                     label: "销售数量",
        //                     prop: "Total_Quantity",
        //                     align: 'center',
        //                     isChildren:false,
        //                     isChildren_Old:false,
        //                     fixed: false,//固定位置
        //                     custom: true,//启用自定义插槽
        //                     showOverflowTooltip: true,//过长时是否
        //                     width: "",
        //                     isImage:false,
        //                     isImage_Old:false,
        //                 }, {
        //                     label: "包装",
        //                     prop: "Articles_Category",
        //                     align: 'center',
        //                     isChildren:false,
        //                     isChildren_Old:false,
        //                     fixed: false,//固定位置
        //                     custom: true,//启用自定义插槽
        //                     showOverflowTooltip: true,//过长时是否
        //                     width: "",
        //                     isImage:false,
        //                     isImage_Old:false,
        //                 }, {
        //                     label: "货源地",
        //                     prop: "Total_Quantity",
        //                     align: 'center',
        //                     isChildren:false,
        //                     isChildren_Old:false,
        //                     fixed: false,//固定位置
        //                     showOverflowTooltip: true,//过长时是否
        //                     width: "",
        //                     isImage:false,
        //                     isImage_Old:false,
        //                 }, {
        //                     label: "所属企业",
        //                     prop: "Enterprise_Name",
        //                     align: 'center',
        //                     isChildren:false,
        //                     isChildren_Old:false,
        //                     fixed: false,//固定位置
        //                     showOverflowTooltip: true,//过长时是否
        //                     width: "",
        //                     isImage:false,
        //                     isImage_Old:false,
        //                 }, {
        //                     label: "发布人",
        //                     prop: "Enterprise_Name",
        //                     align: 'center',
        //                     isChildren:false,
        //                     isChildren_Old:false,
        //                     fixed: false,//固定位置
        //                     custom: true,//启用自定义插槽
        //                     showOverflowTooltip: true,//过长时是否
        //                     width: "",
        //                     isImage:false,
        //                     isImage_Old:false,
        //                 }, {
        //                     label: '操作',
        //                     width: '',
        //                     isChildren:false,
        //                     isChildren_Old:false,
        //                     isImage:false,
        //                     isImage_Old:false,
        //                     align: 'left',
        //                     config: true
        //                 }],
        //             },
        //             pagination: {
        //             }
        //         }
        //     }]
        // },
        // {
        //     title: 'PlateCore',
        //     config: 'PlateCoreConfig',
        //     layer: true,
        //     id: createUniqueString(),
        //     data: {
        //         width: '1200',
        //         widthUnit: 'px'
        //     },
        //     slot: [{
        //         title: 'Object',
        //         config: 'ObjectConfig',
        //         layer: false,
        //         id: createUniqueString(),
        //         data: {
        //             width: 100,
        //             widthUnit: '%',
        //             height: 700,
        //             heightUnit: 'px',
        //             left: 0,//左边距
        //             leftUnit: 'px',//左边距单位
        //             right: 0,//右边距
        //             rightUnit: 'px',//右边距单位
        //             top: 20,//上边距
        //             topUnit: 'px',//上边距单位
        //             bottom: 0,//下边距
        //             bottomUnit: 'px',//下边距单位
        //             url: 'https://digital.essc.top/dist/DigitalScreen/index.html',
        //             type: 'text/html'
        //         },
        //     }]
        // },
        //下方为小程序
        // {
        //     title: 'Swiper',
        //     config: 'SwiperConfig',
        //     layer: true,
        //     id: createUniqueString(),
        //     data: {
        //         arrow: 'never',//切换箭头展示
        //         times: 2,//轮播时长 单位:s
        //         type: "",//类型 空:默认  card:卡片化
        //         trigger: "click",//指示器触发条件
        //         radius: 10,//圆角弧度
        //         left: 10,//左边距
        //         leftUnit: 'px',//左边距单位
        //         right: 10,//右边距
        //         rightUnit: 'px',//右边距单位
        //         top: 10,//上边距
        //         topUnit: 'px',//上边距单位
        //         bottom: 0,//下边距
        //         bottomUnit: 'px',//下边距单位
        //         direction: 'horizontal',//滚动方向 水平:horizontal 垂直:vertical
        //         height: '150',//高度
        //         heightUnit: 'px',//高度单位
        //         width: '100',//高度
        //         widthUnit: '%',//高度单位
        //         Children: {
        //             image: [{
        //                 id: 1,
        //                 src: './img/t1.png',
        //                 fit: 'contain'
        //             }, {
        //                 id: 2,
        //                 src: './img/t2.png',
        //                 fit: 'contain'
        //             }, {
        //                 id: 3,
        //                 src: './img/t3.png',
        //                 fit: 'contain'
        //             }, {
        //                 id: 4,
        //                 src: './img/t4.png',
        //                 fit: 'contain'
        //             }, {
        //                 id: 5,
        //                 src: './img/t1.png',
        //                 fit: 'contain'
        //             }, {
        //                 id: 6,
        //                 src: './img/t2.png',
        //                 fit: 'contain'
        //             }, {
        //                 id: 7,
        //                 src: './img/t3.png',
        //                 fit: 'contain'
        //             }, {
        //                 id: 8,
        //                 src: './img/t4.png',
        //                 fit: 'contain'
        //             }]
        //         }
        //     }
        // },
        // {
        //     title: 'Card',
        //     config: 'CardConfig',
        //     layer: true,
        //     id: createUniqueString(),
        //     slot: [{
        //         title: 'NavItem',
        //         config: 'NavItemConfig',
        //         layer: false,
        //         id: createUniqueString(),
        //         data: [{
        //             img: './img/t1.png',
        //             name: '粮油副食',
        //             fit: 'cover'
        //         }, {
        //             img: './img/t2.png',
        //             name: '水果蔬菜',
        //             fit: 'cover'
        //         }, {
        //             img: './img/t3.png',
        //             name: '休闲食品',
        //             fit: 'cover'
        //         }, {
        //             img: './img/t4.png',
        //             name: '肉蛋水产',
        //             fit: 'cover'
        //         }, {
        //             img: './img/t1.png',
        //             name: '粮油副食',
        //             fit: 'cover'
        //         }, {
        //             img: './img/t1.png',
        //             name: '粮油副食',
        //             fit: 'cover'
        //         }, {
        //             img: './img/t1.png',
        //             name: '粮油副食',
        //             fit: 'cover'
        //         }, {
        //             img: './img/t1.png',
        //             name: '粮油副食',
        //             fit: 'cover'
        //         }, {
        //             img: './img/t1.png',
        //             name: '粮油副食',
        //             fit: 'cover'
        //         }, {
        //             img: './img/t1.png',
        //             name: '粮油副食',
        //             fit: 'cover'
        //         }]
        //     }]
        // }, {
        //     title: 'Tab',
        //     config: 'TabConfig',
        //     layer: true,
        //     id: createUniqueString(),
        //     data: [{
        //         'tab': '热门推荐',
        //     }, {
        //         'tab': '跨天预订',
        //     }, {
        //         'tab': '减配送费',
        //     }, {
        //         'tab': '点评高分',
        //     }],
        //     slot: [{
        //         title: 'ShopList',
        //         config: 'ShopListConfig',
        //         layer: false,
        //         id: createUniqueString(),
        //         data: [{
        //             src: './img/t1.png',
        //             name: '测试美食',
        //             main: '商品简介商品简介商品简介商品简介商品简介',
        //             amount: '29.90'
        //         }, {
        //             src: './img/t1.png',
        //             name: '测试美食',
        //             main: '商品简介商品简介商品简介商品简介商品简介',
        //             amount: '29.90'
        //         }, {
        //             src: './img/t1.png',
        //             name: '测试美食',
        //             main: '商品简介商品简介商品简介商品简介商品简介',
        //             amount: '29.90'
        //         }, {
        //             src: './img/t1.png',
        //             name: '测试美食',
        //             main: '商品简介商品简介商品简介商品简介商品简介',
        //             amount: '29.90'
        //         }, {
        //             src: './img/t1.png',
        //             name: '测试美食',
        //             main: '商品简介商品简介商品简介商品简介商品简介',
        //             amount: '29.90'
        //         }],
        //     }]
        // }
      ],
      data: [
        {
          title: "Swiper",
          config: "SwiperConfig",
          name: "轮播图",
          slot: false,
          data: {
            arrow: "never", //切换箭头展示
            times: 2, //轮播时长 单位:s
            type: "", //类型 空:默认  card:卡片化
            trigger: "click", //指示器触发条件
            radius: 10, //圆角弧度
            left: 10, //左边距
            leftUnit: "px", //左边距单位
            right: 10, //右边距
            rightUnit: "px", //右边距单位
            top: 10, //上边距
            topUnit: "px", //上边距单位
            bottom: 0, //下边距
            bottomUnit: "px", //下边距单位
            direction: "horizontal", //滚动方向 水平:horizontal 垂直:vertical
            height: "150", //高度
            heightUnit: "px", //高度单位
            Children: {
              image: [
                {
                  id: 1,
                  src: "./img/t1.png",
                  fit: "contain",
                },
                {
                  id: 2,
                  src: "./img/t2.png",
                  fit: "contain",
                },
                {
                  id: 3,
                  src: "./img/t3.png",
                  fit: "contain",
                },
                {
                  id: 4,
                  src: "./img/t4.png",
                  fit: "contain",
                },
                {
                  id: 5,
                  src: "./img/t1.png",
                  fit: "contain",
                },
                {
                  id: 6,
                  src: "./img/t2.png",
                  fit: "contain",
                },
                {
                  id: 7,
                  src: "./img/t3.png",
                  fit: "contain",
                },
                {
                  id: 8,
                  src: "./img/t4.png",
                  fit: "contain",
                },
              ],
            },
          },
        },
        {
          title: "Card",
          config: "CardConfig",
          name: "卡片",
          slot: true,
        },
        {
          title: "NavItem",
          config: "NavItemConfig",
          name: "导航",
          slot: false,
          data: [
            {
              img: "./img/t1.png",
              name: "粮油副食",
            },
            {
              img: "./img/t2.png",
              name: "水果蔬菜",
            },
            {
              img: "./img/t3.png",
              name: "休闲食品",
            },
            {
              img: "./img/t4.png",
              name: "肉蛋水产",
            },
          ],
        },
        {
          title: "Tab",
          config: "TabConfig",
          name: "选项卡",
          slot: true,
          data: [
            {
              tab: "测试",
            },
            {
              tab: "测试",
            },
            {
              tab: "测试",
            },
          ],
        },
        {
          title: "Tab",
          config: "TabConfig",
          name: "表格",
          slot: true,
          data: [
            {
              tab: "测试",
            },
            {
              tab: "测试",
            },
            {
              tab: "测试",
            },
          ],
        },
        {
          title: "ShopList",
          name: "商品列表",
          config: "ShopListConfig",
          slot: false,
          data: [
            {
              src: "./img/t1.png",
              name: "测试美食",
              main: "商品简介商品简介商品简介商品简介商品简介",
              amount: "29.90",
            },
            {
              src: "./img/t1.png",
              name: "测试美食",
              main: "商品简介商品简介商品简介商品简介商品简介",
              amount: "29.90",
            },
            {
              src: "./img/t1.png",
              name: "测试美食",
              main: "商品简介商品简介商品简介商品简介商品简介",
              amount: "29.90",
            },
            {
              src: "./img/t1.png",
              name: "测试美食",
              main: "商品简介商品简介商品简介商品简介商品简介",
              amount: "29.90",
            },
            {
              src: "./img/t1.png",
              name: "测试美食",
              main: "商品简介商品简介商品简介商品简介商品简介",
              amount: "29.90",
            },
          ],
        },
        {
          title: "row",
          config: "rowConfig",
          name: "栅格布局",
          data: {
            gutter: 0, //栅格间隔
            type: false, //type布局模式，可选flex
            justify: "start", //flex布局下水平排列方式
            align: "top", //flex布局下垂直排列方式
            tag: "div", //自定义标签元素类型
          },
          slot: [
            {
              title: "rowItem",
              config: "rowItemConfig",
              layer: false,
              name: "栅格",
              data: {
                minHeight: 100, //最小高度
                minHeightUnit: "px", //最小高度单位
                span: 24, //栅格占据的列数
                offset: 0, //栅格左侧的间隔格数
                push: 0, //栅格向右移动格数
                pull: 0, //栅格向左移动格数
                xs: false, //<768px 响应式栅格数或者栅格属性对象
                sm: false, //≥768px 响应式栅格数或者栅格属性对象
                md: false, //≥992px 响应式栅格数或者栅格属性对象
                lg: false, //≥1200px 响应式栅格数或者栅格属性对象
                xl: false, //≥1920px 响应式栅格数或者栅格属性对象
                tag: "div", //自定义元素标签
              },
              slot: [],
            },
          ],
        },
      ],
      Page_SerialNumber: "",
      nowVal: 50,
      loading: false,
    };
  },
  store,
  mixins: [drag],
  computed: {
    SelectElement() {
      return this.$store.state.SelectElement;
    },
    SortableSwitch() {
      return this.$store.state.SortableSwitch;
    },
  },
  watch: {
    SortableSwitch(val) {
      this.isSwitch = val;
    },
  },
  methods: {
    change1(val) {
      console.log(val);
    },
    dao() {
      let _this = this;
      $.ajax({
        type: "POST",
        url: "http://192.168.10.71:8080/svysj/aaaaaa",
        data: {
          JSON: JSON.stringify(this.form),
        },
        success: function (Result) {
          _this.$message.success("操作成功");
        },
        error: function () {
          _this.$message.error("操作失败，请稍后再试");
        },
        dataType: "json",
      });
    },
    environment(id) {
      if (id == 1) {
        $("#test").css({
          transform: "none",
          width: "375px",
          height: "100%",
        });
      } else if (id == 2) {
        $("#test").css({
          transform: "scale(0.5) translate(-50%,-50%)",
          width: "1400px",
          height: "200%",
        });
      }
    },
    getData(Primary_Key) {
      const _this = this;
      $.ajax({
        type: "POST",
        url: DomainName + "/getInquiryIDAction?grant_type=tourist",
        data: {
          Data: "page_info",
          Primary_Key,
          Primary_Key_Name: "Page_SerialNumber",
          isNullEnterprise: true,
        },
        success: function (Result) {
          if (Result.length == 1 && Result[0].Page_JSON != "") {
            console.log(Result);
            _this.form = Result[0].Page_JSON;
            console.log(_this.form);
          }
        },
        error: function () {
          _this.$message.error("操作失败，请稍后再试");
        },
        dataType: "json",
      });
    },
    handle(item) {
      if (this.SelectElement) {
        let obj = this.findObjectsById(this.SelectElement, this.form)[0];
        obj.slot.push({
          layer: false,
          title: item.title,
          data: item.data,
          config: item.config,
          slot: item.slot ? [] : "",
          id: createUniqueString(),
        });
      } else if (item.title == "row") {
        this.form.push({
          layer: true,
          title: item.title,
          data: item.data,
          config: item.config,
          id: createUniqueString(),
          slot: [
            {
              title: "rowItem",
              config: "rowItemConfig",
              layer: false,
              id: createUniqueString(),
              data: {
                minHeight: 100, //最小高度
                minHeightUnit: "px", //最小高度单位
                span: 24, //栅格占据的列数
                offset: 0, //栅格左侧的间隔格数
                push: 0, //栅格向右移动格数
                pull: 0, //栅格向左移动格数
                xs: false, //<768px 响应式栅格数或者栅格属性对象
                sm: false, //≥768px 响应式栅格数或者栅格属性对象
                md: false, //≥992px 响应式栅格数或者栅格属性对象
                lg: false, //≥1200px 响应式栅格数或者栅格属性对象
                xl: false, //≥1920px 响应式栅格数或者栅格属性对象
                tag: "div", //自定义元素标签
              },
              slot: [],
            },
          ],
        });
      } else {
        this.form.push({
          layer: true,
          title: item.title,
          data: item.data,
          config: item.config,
          slot: item.slot ? [] : "",
          id: createUniqueString(),
        });
      }
    },
    findObjectsById(id, arr, result = []) {
      for (let obj of arr) {
        if (obj.id === id) {
          result.push(obj);
        }
        if (Array.isArray(obj.slot) && obj.slot.length > 0) {
          this.findObjectsById(id, obj.slot, result);
        }
      }
      return result;
    },
    handle1() {
      this.$store.commit("setSelectElement", "");
      console.log(this.SelectElement);
    },
    hadnlelayer() {
      this.$store.commit("setSortableSwitch");
    },
    sumbit() {
      const _this = this;
      _this.loading = true;
      $.ajax({
        type: "POST",
        url: DomainName + "/TableIDEdit?token=" + $.cookie("token"),
        data: {
          TableName: "page_info",
          Primary_Key: JSON.stringify({
            Page_SerialNumber: this.Page_SerialNumber,
            // Page_SerialNumber:'P01000000000001',
          }),
          Modify: JSON.stringify({
            Page_JSON: JSON.stringify(this.form),
          }),
          Operation_Name: "修改页面样式",
        },
        success: function (res) {
          if (res.Status == "success") {
            _this.$message.success("操作成功!");
            window.history.go(-1);
          } else {
            _this.$message.error("操作失败，请稍后再试");
          }
        },
        error: function () {
          _this.$message.error("操作失败，请稍后再试");
        },
        complete: function (XMLHttpRequest) {
          _this.loading = false;
          if (XMLHttpRequest.getResponseHeader("REDIRECT") == "REDIRECT") {
            window.parent.document.location.href =
              absolutepath() + XMLHttpRequest.getResponseHeader("CONTENTPATH");
          }
        },
        dataType: "json",
      });
    },
  },
  mounted() {
    // this.Page_SerialNumber = 'P01000000000001';
    this.Page_SerialNumber = sessionStorage.getItem("Page_SerialNumber")
      ? sessionStorage.getItem("Page_SerialNumber")
      : getQueryObject().Page_SerialNumber;
    if (this.Page_SerialNumber) {
      this.getData(this.Page_SerialNumber);
    }
    if (getQueryObject().is == "config") {
      this.sortable(this, "#test div", ".layer", this.form);
      var video = document.getElementById("video");
    }
  },
});
